<template>
  <view class="PinSwiper">
    <swiper autoplay circular @change="onChange">
      <swiper-item v-for="item in bannerData" :key="item.id_">
        <view class="navigator-hover">
          <image :src="item.url_" mode="aspectFill" />
        </view>
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text class="dot" :class="{ active: index === activeIdx }" v-for="(item, index) in bannerData"
        :key="item.id_"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { bannerState } from '@/types/goods';

defineProps<{
  bannerData: bannerState[]
}>()

const activeIdx = ref(0)

const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIdx.value = ev.detail.current
}
</script>

<style lang="scss" scoped>
.PinSwiper {
  width: 100%;
  height: 380px;
  position: relative;

  .navigator-hover {
    width: 100%;
    height: 100%;
  }

  .indicator {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 9;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      margin: 0 4px;
      background: rgba(255, 255, 255, 0.5);
    }

    .active {
      background: rgba(255, 255, 255, 1);
    }
  }
}
</style>

